<script setup lang="ts"></script>

<template>
  <div class="footer-slogan">
    <video
      src="@/assets/video/slogan-bg.mp4"
      class="slogan-video"
      autoplay
      @contextmenu.prevent.stop
      :controls="false"
      loop
      muted
    ></video>
    <div class="fixed-container">
      <div class="head-title mb-2">和超过1000+客户一起开启全新的加速体验</div>
      <div class="mb-8">全球优质节点覆盖，用户随处可用</div>
      <ul class="list m-0 mb-8">
        <li class="item">
          <i-fs-global />
          <div class="title">1000+</div>
          <span class="subtitle">/ 全球边缘节点</span>
        </li>
        <li class="item">
          <i-fs-access />
          <div class="title">80%</div>
          <span class="subtitle">/ 访问速度提升</span>
        </li>
        <li class="item">
          <i-fs-defense />
          <div class="title">1000万+</div>
          <span class="subtitle">/ 每日防御攻击次数</span>
        </li>
        <li class="item">
          <i-fs-serve />
          <div class="title">7*24h</div>
          <span class="subtitle">/ 全天候品质服务</span>
        </li>
      </ul>
      <free-use-button reverse></free-use-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.footer-slogan {
  @apply bg-white w-full relative;
  height: 385px;
  .slogan-video {
    @apply w-full h-full object-cover absolute top-0 left-0;
  }
  .fixed-container {
    @apply h-full relative z-10 flex flex-col items-center justify-center  text-white;
    .head-title {
      font-family: 'PingFang SC medium';
      font-size: 32px;
      line-height: 32px;
    }
    .list {
      @apply grid grid-cols-4 gap-x-20 items-center list-none;
      .item {
        @apply flex items-center gap-x-2;
        .subtitle {
          opacity: 0.7;
        }
      }
    }
  }
}
</style>
